<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-27 15:36:25
 * @LastEditors: luosi 1297957337@qq.com
 * @LastEditTime: 2024-12-04 09:47:00
 * @FilePath: \sr_system_manager_ui\src\views\achievementReward\assessmentReward\researchAssessment\components\EditModal.vue
 * @Description: 科研考核  新增/编辑/查看
-->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import formateDate from '@/utils/formateDate'
import { assessmentDetail, assessmentCreate, assessmentUpdate } from '@/api/assessment';
import { BaseSuccessRespDTO, AssessmentDetailVO, AssessmentMethodChangeHistoryDO } from '@/api/assessment/types';

const props = defineProps({
  visible: {
    type: Boolean
  },
  id: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  },
})

const emits = defineEmits(['cancel'])

const formRef = ref()

const form = ref({
  name: '',
  year: new Date().getFullYear(),
  dangerTime: [],
  assessmentMethodChangeHistory: [],
  workloadSetting: []
})

const rules = ref({
  name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  year: [{ required: true, message: "考核年度不能为空", trigger: "blur" }],
  dangerTime: [{ required: true, message: "考核时间不能为空", trigger: "blur" }],
})

const { run: getDetail } = useRequest(() => assessmentDetail({ id: props.id }), {
  manual: true,
  onSuccess: (res: AssessmentDetailVO) => {
    form.value = {
      name: res?.name,
      year: res?.year,
      dangerTime: [formateDate(res?.startTime).format('YYYY-MM-DD'), formateDate(res?.endTime).format('YYYY-MM-DD')],
      assessmentMethodChangeHistory: res?.assessmentMethodChangeHistory as AssessmentMethodChangeHistoryDO[] || [],
    }
  }
})

const { run: create, loading: addLoading } = useRequest(() => assessmentCreate({
  name: form.value.name,
  startTime: formateDate(form.value.dangerTime[0]).format('YYYY-MM-DD 00:00:00'),
  endTime: formateDate(form.value.dangerTime[1]).format('YYYY-MM-DD 23:59:59'),
  workloadSetting: form.value.workloadSetting
}), {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '新增成功!',
        type: 'success',
        plain: true,
      })
      emits('cancel', true)
    }
  }
})

const { run: update, loading: updateLoading } = useRequest(() => assessmentUpdate({
  id: props.id,
  name: form.value.name,
  startTime: formateDate(form.value.dangerTime[0]).format('YYYY-MM-DD 00:00:00'),
  endTime: formateDate(form.value.dangerTime[1]).format('YYYY-MM-DD 23:59:59')
}), {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '更新成功!',
        type: 'success',
        plain: true,
      })
      emits('cancel', true)
    }
  }
})

const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      if (props.id) {
        update()
      } else {
        create()
      }
    }
  })
}

watch(() => props.visible, () => {
  if (props.visible && props.id) {
    getDetail()
  }
}, { immediate: true })

</script>

<template>
  <el-dialog v-model="props.visible" :title="`${props.type === 'edit' ? '编辑' : props.type === 'add' ? '新增' : '查看'}考核`"
    width="600px" align-center @close="emits('cancel')">
    <el-form ref="formRef" :model="form" :rules="props.type !== 'view' ? rules : {}" label-width="auto">
      <el-form-item label="名称" prop="name">
        <el-input v-if="props.type !== 'view'" v-model="form.name" placeholder="请输入" clearable :maxlength="50"
          show-word-limit />
        <div v-else>{{ form.name }}</div>
      </el-form-item>
      <el-form-item label="考核年度" prop="year">
        <div>{{ form.year }}年度</div>
      </el-form-item>
      <el-form-item label="考核时间" prop="dangerTime">
        <el-date-picker v-if="props.type !== 'view'" v-model="form.dangerTime" type="daterange" start-placeholder="开始日期"
          end-placeholder="结束日期" clearable />
        <div v-else>{{ formateDate(form.dangerTime[0]).format('YYYY-MM-DD') }}~{{
          formateDate(form.dangerTime[1]).format('YYYY-MM-DD') }}</div>
      </el-form-item>
      <el-form-item v-if="props.type === 'view' && form.assessmentMethodChangeHistory?.length" label="考核办法"
        prop="assessmentMethodChangeHistory">
        <div class="flex flex-col space-y-[20px]">
          <div v-for="history in form.assessmentMethodChangeHistory" :key="history.assessmentMethodId"
            class="leading-[22px]">
            <div>{{ formateDate(history.startTime).format('YYYY-MM-DD') }}~{{
              history.endTime ? formateDate(history.endTime).format('YYYY-MM-DD') : '至今' }}<br />
              {{ history.assessmentMethodName }}
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div v-if="props.type !== 'view'" class="dialog-footer">
        <el-button @click="emits('cancel', false)">取消</el-button>
        <el-button v-loading="addLoading || updateLoading" type="primary" @click="handleSubmit">确认</el-button>
      </div>
      <div v-else class="dialog-footer">
        <el-button @click="emits('cancel', false)">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>